import React from 'react';
import { View, Text, TouchableOpacity, Image } from "react-native";
import { pxToDp } from '../../../../utils/stylesKits';
import SearchInput from "../components/SearchInput";
import IconFont from "../../../../components/IconFont";
import { BASE_URI } from "../../../../utils/pathMap";
class Index extends React.Component {
    state = {
        txt: ''
    }
    render() {
        const { txt } = this.state
        const { ilikelist } = this.props
        // console.log(ilikelist);
        // 筛选后的数组
        const list = ilikelist.filter(v => v.nick_name.includes(txt))
        return (
            <View style={{ flex: 1, backgroundColor: '#fff' }}>
                <View style={{ backgroundColor: '#eee', padding: pxToDp(10) }}>
                    <SearchInput onChangeText={txt => this.setState({ txt })} value={this.state.txt} />
                </View>
                {
                    list.map((user, i) => <View
                        key={i}
                        style={{ flexDirection: 'row', paddingTop: pxToDp(15), paddingBottom: pxToDp(15), paddingRight: pxToDp(15), borderBottomColor: '#ccc', borderBottomWidth: pxToDp(1) }}>
                        {/* 图片 */}
                        <View style={{ paddingLeft: pxToDp(15), paddingRight: pxToDp(15) }}>
                            <Image style={{ width: pxToDp(50), height: pxToDp(50), borderRadius: pxToDp(25) }} source={{ uri: BASE_URI + user.header }} />
                        </View>
                        {/* 名称 */}
                        <View style={{ flex: 2, justifyContent: 'space-around', paddingLeft: pxToDp(10) }}>
                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                <Text style={{ color: '#666', fontWeight: 'bold', fontSize: pxToDp(17) }}>{user.nick_name}</Text>
                                <View style={{ flexDirection: 'row', backgroundColor: '#fff', borderRadius: pxToDp(14), padding: pxToDp(3) }}>
                                    <IconFont
                                        style={{ fontSize: pxToDp(18), color: user.gender === '男' ? '#b564bf' : 'red' }}
                                        name={user.gender === '女' ? 'icontanhuanv' : 'icontanhuanan'} />
                                    <Text style={{ color: '#555' }}>{user.age}岁</Text>
                                </View>
                            </View>
                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                <IconFont style={{ color: '#666' }} name="iconlocation" />
                                <Text style={{ color: '#666', marginLeft: pxToDp(5) }}>{user.city}</Text>
                            </View>
                        </View>

                        {/* 按钮 */}
                        <TouchableOpacity style={{ width: pxToDp(80), height: pxToDp(30), borderRadius: pxToDp(3), borderColor: '#ccc', borderWidth: pxToDp(1), flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center', alignSelf: 'center' }}>
                            <IconFont style={{ color: '#666' }} name="iconjia" />
                            <Text style={{ color: '#666' }}>已关注</Text>
                        </TouchableOpacity>
                    </View>)
                }
            </View>
        );
    }
}
export default Index;